// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import Qt5Compat.GraphicalEffects
import Fk
import Fk.Components.Common

Item {
  id: root
  property string skill
  property var choices: []
  property var all_choices: []
  property int min_num: 0
  property int max_num: 0
  property var answer: []
  property bool detailed: false
  property bool cancelable: false

  width: img.width
  height: 30

  BorderImage {
    id: img
    height: root.height
    width: Math.max(imgText.width + 50, 83)
    border.left: 27
    border.top: 0
    border.right: 27
    border.bottom: 0
    source: Cpp.path + "/packages/lunarltk-qsgs-ui/image/selfArea/interaction.png"
  }

  Glow {
    id: imgTextGlow
    source: imgText
    anchors.fill: imgText
    color: '#000000'
    spread: 0.9
    radius: 1.5
  }

  Text {
    id: imgText
    anchors.horizontalCenter: img.horizontalCenter
    anchors.verticalCenter: img.verticalCenter
    font.family: "SimSun"
    font.pixelSize: 14
    color: "white"
    height: contentHeight
    width: contentWidth
    text: Lua.tr("AskForChoices")
  }

  MouseArea {
    anchors.fill: root
    onPressed: {
      root.clicked();
    }
  }

  onAnswerChanged: {
    if (!answer) return;
    Lua.call("UpdateRequestUI", "Interaction", "1", "update", answer);
  }

  function clicked() {
    Lua.call("UpdateRequestUI", "Interaction", "1", "update", []);
    if (detailed) {
      roomScene.popupBox.sourceComponent =
        Qt.createComponent("../../../Pages/LunarLTK/DetailedCheckBox.qml"); //TODO
    } else {
      roomScene.popupBox.sourceComponent =
        Qt.createComponent("../../../Pages/LunarLTK/CheckBox.qml"); //TODO
    }
    const box = roomScene.popupBox.item;
    box.options = choices;
    box.all_options = all_choices;
    box.skill_name = skill;
    box.min_num = min_num;
    box.max_num = max_num;
    box.accepted.connect(() => {
      answer = box.result.map(result => all_choices[result]);
    });
  }

}
